import { Component } from 'react'
import Taro from '@tarojs/taro'
import {View } from '@tarojs/components'
import './index.scss'

export default class PrSwitch extends Component {
  constructor () {
    super(...arguments)
    this.handleChange = this.handleChange.bind(this);
  }
  state = {}
  componentWillReceiveProps = () =>{

  }
  handleChange = value => {
    if (this.props.disabled) return;
    var that = this;
    that.props.onClick && that.props.onClick(that.props.value);
  }
  render () {
    var props = this.props; 
    var className = props.className || "", subStyle = {}, style = props.style || {};
    if (props.disabled) {
      className += " lg_switch_disable"
    } else if (this.props.value){
      className += " lg_switch_open";
    }
      

    if (props.height) {
      var subWidth = Taro.pxTransform(props.height - 6);
      if (this.props.default) {
        var left = props.width || 100;
        left = Taro.pxTransform(left - props.height - 9);
      } else {
        var left = Taro.pxTransform(3)
      }
      subStyle = {width: subWidth, height: subWidth, left: left};
      style.borderRadius = Taro.pxTransform(props.height / 2);
    }
    
    return (
      <View className={"lg_switch " + className} onClick={this.handleChange} style={style}>
        <View className="sub_btn" style={subStyle}>
          <View className="sub_btn_radius"/>
        </View>
      </View>
    )
  }
}